<template>
  <div class="toolbar" v-show="isShowToolbar">
    <div
      v-for="(btn, index) in toolbarList[btntype]"
      :key="index"
      class="Site-buttons"
      @click="btnClick(btn, index)"
    >
      <img :src="btn.active ? btn.icon_active : btn.icon" />
      <div class="tooltiptext">
        <div class="textContent">{{ btn.name }}</div>
      </div>
      <!-- <img v-show="!btn.active" :src="btn.icon" /> -->
    </div>
    <!-- <div class="Site-buttons" @click="btnClick1">
      <img :src="gxPopup.active ? gxPopup.icon_active : gxPopup.icon" />
      <div class="tooltiptext">
        <div class="textContent">{{ gxPopup.name }}</div>
      </div>
    </div> -->

    <div class="Site-buttons">
      <img
        v-if="gxPopup.active == false"
        :src="gxPopup.icon"
        @click="btnClick1(!false)"
      />
      <img
        v-if="gxPopup.active == true"
        :src="gxPopup.icon_active"
        @click="btnClick1(!true)"
      />
      <div class="tooltiptext">
        <div class="textContent">{{ gxPopup.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
export default {
  name: "ZcscProjectToolbar",
  props: {
    btntype: {
      default: () => 2,
    },
  
  },
  computed: {
    maptype() {
      return this.$store.getters.maptype;
    },
    // btntype() {
    //   return this.$store.getters.btntype;
    // },
    mapstatus() {
      return this.$store.getters.mapstatus;
    },
  },
  watch: {
    mapstatus(newval, oldval) {
      this.gxPopup.active = newval;
      // switch (this.gxPopup.active) {
      //   case true:
      //     this.$store.commit("changemapstatus", true);
      //     this.setToolBarStatus();
      //     Bus.$emit("setToolBarPopupIsShow");
      //     break;
      //   case false:
      //     this.$store.commit("changemapstatus", false);
      //     break;
      //   default:
      //     break;
      // }
    },
  },
  data() {
    return {
      isShowToolbar: true,
      gxPopup: {
        name: "管线弹框",
        value: "gxPopup",
        icon: require("@/assets/toolbar/close-popup.png"),
        icon_active: require("@/assets/toolbar/open-popup.png"),
        active: true,
      },
      toolbarList: {
        3: [
          {
            name: "图层管理",
            icon: require("@/assets/toolbar/layer-uncheck.png"),
            icon_active: require("@/assets/toolbar/layer-checked.png"),
            active: false,
            value: "Layers",
          },
          {
            name: "画线量算",
            value: "Polyline",
            icon: require("@/assets/toolbar/line-uncheck.png"),
            icon_active: require("@/assets/toolbar/line-checked.png"),
            active: false,
            value: "Polyline",
          },
          {
            name: "量高",
            value: "Height",
            icon: require("@/assets/toolbar/height-uncheck.png"),
            icon_active: require("@/assets/toolbar/height-checked.png"),
            active: false,
            value: "Height",
          },
          {
            name: "画面量算",
            value: "Polygon",
            icon: require("@/assets/toolbar/area-uncheck.png"),
            icon_active: require("@/assets/toolbar/area-checked.png"),
            active: false,
            value: "Polygon",
          },
          {
            name: "清除",
            value: "Clear",
            icon: require("@/assets/toolbar/clear-uncheck.png"),
            icon_active: require("@/assets/toolbar/clear-checked.png"),
            active: false,
            value: "Clear",
          },
          // {
          //   name: "标绘",
          //   icon: require("@/assets/toolbar/mark-uncheck.png"),
          //   icon_active: require("@/assets/toolbar/mark-checked.png"),
          //   active: false,
          //   value: "doMark",
          // },

          {
            name: "漫游",
            icon: require("@/assets/toolbar/fly-uncheck.png"),
            icon_active: require("@/assets/toolbar/fly-checked.png"),
            active: false,
            value: "Fly",
          },
          // {
          //   name: "显示管线",
          //   icon: require("@/assets/toolbar/touming-uncheck.png"),
          //   icon_active: require("@/assets/toolbar/touming-checked.png"),
          //   active: false,
          //   value: "GroundTran",
          // },
          // {
          //   name: "弹框",
          //   value: "gxPopup",
          //   icon: require("@/assets/toolbar/close-popup.png"),
          //   icon_active: require("@/assets/toolbar/open-popup.png"),
          //   active: true,
          // },
        ],
        2: [
          {
            name: "图层管理",
            value: "Layers",
            icon: require("@/assets/toolbar/layer-uncheck.png"),
            icon_active: require("@/assets/toolbar/layer-checked.png"),
            active: false,
          },
          {
            name: "画线量算",
            value: "Polyline",
            icon: require("@/assets/toolbar/line-uncheck.png"),
            icon_active: require("@/assets/toolbar/line-checked.png"),
            active: false,
          },
          {
            name: "画面量算",
            value: "Polygon",
            icon: require("@/assets/toolbar/area-uncheck.png"),
            icon_active: require("@/assets/toolbar/area-checked.png"),
            active: false,
          },
          {
            name: "清除",
            value: "Clear",
            icon: require("@/assets/toolbar/clear-uncheck.png"),
            icon_active: require("@/assets/toolbar/clear-checked.png"),
            active: false,
          },
          // {
          //   name: "漫游",
          //   icon: require("@/assets/toolbar/fly-uncheck.png"),
          //   icon_active: require("@/assets/toolbar/fly-checked.png"),
          //   active: false,
          //   value: "Fly",
          // },
          // {
          //   name: "标绘",
          //   icon: require("@/assets/toolbar/mark-uncheck.png"),
          //   icon_active: require("@/assets/toolbar/mark-checked.png"),
          //   active: false,
          //   value: "doMark",
          // },
          // {
          //   name: "管线弹框",
          //   value: "gxPopup",
          //   icon: require("@/assets/toolbar/close-popup.png"),
          //   icon_active: require("@/assets/toolbar/open-popup.png"),
          //   active: true,
          // },
        ],
      },
    };
  },

  mounted() {
    //监听工具条弹框的关闭事件
    Bus.$off("setToolBarStatus");
    Bus.$on("setToolBarStatus", this.setToolBarStatus);
    Bus.$on("setGuanXianToolBarItemActive", (value) => {
      this.setToolBarItemActive(value);
    });
    Bus.$on("infowindowsIF", (e) => {
      // this.btnClick2();
      // debugger
      this.setToolBarStatus();
      this.$store.commit("changemapshow", true);
      Bus.$emit("setToolBarPopupIsShow");
      // Bus.$emit("setToolBarPopupIsShow");
      // this.btnClick1(e)
      // this.setToolBarItemActive(value);
    });
    Bus.$on("setToolBarIsShow", this.setToolBarIsShow);
  },

  methods: {
    btnClick1(type) {
      this.gxPopup.active = type;
      this.setToolBarStatus();
      Bus.$emit("setToolBarPopupIsShow");
      Bus.$emit("initlineandpoint", true);
      switch (this.gxPopup.active) {
        case true:
          this.$store.commit("changemapstatus", true);
          // Bus.$emit("setIsShow",true);
          break;
        case false:
          this.$store.commit("changemapstatus", false);
          // Bus.$emit("setIsShow",false);
          break;

        default:
          break;
      }
    },
    btnClick2() {
      this.toolbarList[this.btntype].map((item, key) => {
        item.active = false;
        Bus.$emit(item.value, item.active);
      });
    },
    btnClick(item, index) {
      this.toolbarList[this.btntype].map((item, key) => {
        if (index == key) {
          item.active = !item.active;
          //设置已经显示的工具弹框为隐藏

          Bus.$emit("setToolBarPopupIsShow");
          if(item.value=="Fly"){
            Bus.$emit("initmanyou");
          }
        } else {
          item.active = false;
        }
      });
      if (!item.value) {
        return;
      }
      Bus.$emit(item.value, item.active);
      // console.log(item.value, item.active);
      this.$store.commit("changemapshow", false);
      Bus.$emit("sttp4show",true);
      Bus.$emit("initlineandpoint", true);
      

      // if (item.active == false && this.gxPopup.active == true) {
      //   this.$store.commit("changemapshow", false);
      // } else if (item.active == false && this.gxPopup.active == false) {
      //   this.$store.commit("changemapshow", false);
      // } else if (item.active == true) {
      //   this.$store.commit("changemapshow", false);
      // }

      // if (item.value == "gxPopup") {
      // console.log("changemapstatus", item.active)
      // this.$store.commit("changemapstatus", item.active);
      // Bus.$emit("removealllinecolor", true);
      // this.$store.commit("changetoolbarshowhide", item.active);
      // // console.log("changetoolbarshowhide", item.active);
      // //设置管线点击弹框隐藏事件
      // !item.active && Bus.$emit("setGuanXianPopupHide");
      // item.active && ( Bus.$emit('setGuanXianPopupShow'))
      // } else {
      // Bus.$emit("setGuanXianPopupHide");
      // this.$store.commit("changemapstatus", false);
      // Bus.$emit("removealllinecolor", true);
      // this.setToolBarItemActive("gxPopup")
      // this.btnClick(item, index)
      // }
    },
    /**
     * 重置工具栏图标状态
     */
    setToolBarStatus() {
      this.toolbarList[this.btntype].map((item, key) => {
        item.active = false;
      });
    },
    /**
     * 根据toolbar的value设置其的active状态
     * @param {*} value
     */
    setToolBarItemActive(value) {
      this.toolbarList[this.btntype].map((item, key) => {
        if (item.value == value) {
          item.active = true;
          //设置已经显示的工具弹框为隐藏
          // Bus.$emit("setToolBarPopupIsShow");
        } else {
          item.active = false;
        }
      });
    },

    /**
     * 设置工具栏是否显示
     * @param {*} value 
     */
    setToolBarIsShow(value) {
      this.isShowToolbar = value
    }
  },
};
</script>

<style lang="scss" scoped>
.toolbar {
  position: absolute;
  top: 80px;
  left: 20px;
  // left: 400px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 202px;
  height: 30px;
  background-image: url("@/assets/toolbar/bg-5.png");

  .Site-buttons {
    display: flex;
    align-items: center;
    text-align: center;
    width: 20px;
    height: 20px;
    // background-image: url("@/assets/toolbar/line-uncheck.png");
    // margin: 4px;
  }

  .tooltiptext {
    /* 隐藏该元素 */
    visibility: hidden;
    width: 120px;
    background-color: rgba(9, 22, 42, 0.9);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: relative;
    /* 设置该元素在z轴处于优先显示的位置，因为其他元素没有设置z—index */
    z-index: 1;
    /* 超过了100%就是反向距离 */
    bottom: 80%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    /* 延迟一秒再变为清晰度是1 */
    transition: opacity 1s;
  }

  .Site-buttons:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
}
</style>
